// 元素是构成React应用的最小块
// 与Dom元素不同，React元素是一个对象。React DOM会负责更新DOM使其与React应用中的元素保持一致。

// 1.0 将元素渲染为DOM
const element = ( <h1>This is h1</h1> );
ReactDOM.render(element, document.getElementById('root'))  // 调用此方法使其渲染到根元素id为 root 的元素上

// 2.0 更新渲染元素 (以状态对比，只会更新状态变化的部分)
function tick() {
  const tickmain = (
    <div>
      <h1>这是一个展示当前时间的例子</h1>
      <h2>Now is{ new Date().toLocaleTimeString() }.</h2>
    </div>
  )
  ReactDOM.render(tickmain, document.getElementById('root'))  // 渲染DOM
}
setInterval(tick, 1000) // 定时渲染DOM


